<template>
  <div class="filminfo">
    <label :class="fileInfos.files == '' ? '' : 'file_name'">{{
      fileInfos.files == '' ? '文件名·' : fileInfos.files
    }}</label>
    <form action="#/testcomp" id="addfilm_form">
      <!-- onkeydown="return rescueEnterKey(event)" -->
      <fileApi :fileInfos="fileInfos"></fileApi>
      <fileType :fileInfos="fileInfos"></fileType>
      <!-- <div id="dropfile">
			<input id="img_inp" onchange="" type="file">
			<svg version="1.1" id="svg_add_i" viewBox="0 0 400 400" style="position: absolute; width: 200px; enable-background:new 0 0 400 400;">
				<switch>
					<g>
						<circle class="st0" cx="200.5" cy="200.5" r="150" />
						<rect x="83.5" y="186.5" class="st1" width="238" height="34" />
						<rect x="185.5" y="84.5" class="st1" width="34" height="238" />
					</g>
				</switch>
			</svg>
			<label id="add_alt">拖到这里上传</label>
		</div> -->
      <!-- {{ fileInfos.files == '' ? undefined : fileInfos.files }} -->
      <!-- <button type="submit">確認</button> -->
    </form>
  </div>
</template>

<script setup>
import {
  avandaew,
  assembleFormDetect,
  importFormTable,
} from './formTable/formtable';
import { onMounted, reactive } from 'vue';
import fileApi from './formTable/fileApi.vue';
import fileType from './formTable/fileType.vue';
function rescueEnterKey(event) {
  // console.log('enter', event.keyCode == 13);
  if (event.keyCode == 13) {
    event.preventDefault();
    //   return false;
  }
}
function okbar() {
  console.log('测试 函数');
}

let fileInfos = new reactive({ files: '' });
onMounted(() => {
  importFormTable(['1', '2', '3', '4', '5', '6']);
  avandaew();
  assembleFormDetect('al', '#elv', okbar, 'no error');
  let formEl = document.getElementById('addfilm_form');
  formEl.addEventListener('keydown', rescueEnterKey);

  // let dropel = document.getElementById('dropfile');
  // dropel.addEventListener('click', () => {
  // 	let inp = document.getElementById('img_inp');
  // 	inp.click();
  // });
  // dropel.addEventListener('dragover', e => {
  // 	e.preventDefault();
  // 	e.dataTransfer.dropEffect = 'move';
  // });
  // dropel.addEventListener('drop', function(e) {
  // 	e.preventDefault();
  // 	var list = e.dataTransfer.files;
  // 	console.log(list);
  // 	for (var i = 0; i < list.length; i++) {
  // 		var f = list[i];
  // 		var imageType = /^image\//;
  // 		console.log(f);
  // 		if (!imageType.test(f.type)) {
  // 			console.log('no same type');
  // 			continue;
  // 		}
  // 		// console.log(f);
  // 		reader(f);
  // 	}
  // });
  // function reader(f) {
  // 	// var reader = new FileReader();
  // 	// reader.readAsDataURL(f);
  // 	// reader.onload = function() {
  // 	// 	//            console.log(reader.result);
  // 	// 	var img = new Image();
  // 	// 	img.src = reader.result;
  // 	// 	dropel.appendChild(img);
  // 	// };
  // 	let img = new Image();
  // 	img.src = window.URL.createObjectURL(f);
  // 	// img.onload = function() {
  // 	// 	window.URL.revokeObjectURL(img.src);
  // 	// };
  // 	img.onload = e => {
  // 		window.URL.revokeObjectURL(e.target.src);
  // 	};
  // 	dropel.appendChild(img);
  // 	// var img = document.createElement('img');
  // 	// img.classList.add('imgTest');
  // 	// img.file = f;
  // 	// console.log(img);
  // 	// dropel.appendChild(img);
  // 	// var reader = new FileReader();
  // 	// reader.onload = (function(aImg) {
  // 	// 	return function(e) {
  // 	// 		aImg.src = e.target.result;
  // 	// 	};
  // 	// })(img);
  // 	// reader.readAsDataURL(f);
  // }
});
</script>

<style lang="scss" scoped>
.filminfo {
  grid-area: filmContent;
  position: relative;
  width: 80%;
  height: fit-content;
}
.file_name {
  cursor: pointer;
}
.file_name:hover {
  color: blueviolet;
  transition: color 0.2s ease-in-out 0.02s;
}
#dropfile {
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 200px;
  line-height: 200px;
  background-color: #1eee81fe;
}
#img_inp {
  display: none;
}
#add_alt {
  position: absolute;
  cursor: pointer;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#svg_add_i {
  cursor: pointer;
  z-index: 1;
}
.imgTest {
  width: 100px;
  height: 100px;
}

.st0 {
  // stroke: black;
  fill: #1eee81fe;
  // stroke-miterlimit: 10;
}
.st1 {
  fill: #b3b3b3;
}
</style>
